<template>
	<view class="page-detail">
		<view class="main">
			<view class="title">
				<view>车队名称: {{cdinfo.cdname}}</view>
				<view>车队人数: {{items2.length}} 个</view>
			</view>

			<view class="timesxz">
				<view class="gs" @click="onShowDatePicker">预约日期: {{date1}}</view>
			</view>
			<view class="timesxz">
				<u-button type="primary" :plain="true" @click="addrwtype=true" text="授权货主任务"></u-button>
			</view>
			<u-calendar :show="show" mode="single" :maxCount="1" @confirm="confirm" @close="closes"></u-calendar>


			<view class="tables">
				<view class="tables-item" :class="bccur == item.id ? 'actives':''" v-for="(item,index) in bclist"
					:key="index" @click="addbanc(item.id)">
					<view style="font-size: 15px;font-weight: 600;">{{item.name1}}-{{item.name2}}</view>
				</view>
			</view>
			<view class="tableview">
				<view class="tabletitle">
					<view class="tsa">委托单号</view>
					<view class="tsa">货&#12288;主</view>
					<view class="tsa">是否预约</view>
					<view class="tsa">查看司机</view>
				</view>
				<view class="nottabsl" v-if="items.length==0">
					未找到数据
				</view>
				<view class="tabsl" v-if="items.length>0">
					<view v-for="(item, index) in items" :key="item.id" :class="{'bc3':hzsqid == item.id}"
						style="font-size: 15px;font-weight: 300;height: 40px;line-height: 40px;border: 1px solid;overflow: hidden;">
						<view class="fl" @click="addyuyopen(item)">{{item.orderons}}</view>
						<view class="fl" @click="opfen(item)">{{item.hzdwid}}</view>
						<view class="fl" :class="[{'bc2':item.yytype == 1},{'bc1':item.yytype != 1}]">
							{{item.yytype=='1'?'已预约':'未预约'}}
						</view>
						<view class="fl" @click="cksjinfo(item)">查看</view>
					</view>
				</view>
			</view>



			<view v-show="xzinfo.yytype!=1" style="height: 60px;overflow: hidden;margin-top: 10px;">
				<view class="ls" :class="{lsitv:current1==1}" @click="leixin(1)">车辆总数</view>
				<view class="ls" :class="{lsitv:current1==2}" @click="leixin(2)">选择司机</view>
			</view>
			<view v-show="xzinfo.yytype==1 && xzinfo.ydata.rytype==1"
				style="height: 60px;overflow: hidden;margin-top: 10px;">
				<view class="ls" :class="{lsitv:current1==1}" @click="leixin(1)">车辆总数</view>
			</view>
			<view v-show="xzinfo.yytype==1 && xzinfo.ydata.rytype==2"
				style="height: 60px;overflow: hidden;margin-top: 10px;">
				<view class="ls" :class="{lsitv:current1==2}" @click="editxzitem4(2)">选择司机</view>
			</view>
			<view class="title" v-show="current1==1 && xzinfo.yytype!=1">车辆总数</view>
			<view class="info" v-show="current1==1  && xzinfo.yytype!=1">
				<input type="text" style="font-size: 20px;" v-model="clnum" placeholder="" />
			</view>
			<view class="title" v-show="current1==1 && xzinfo.yytype==1">车辆总数</view>
			<view class="info" v-show="current1==1  && xzinfo.yytype==1">
				<input type="text" style="font-size: 20px;" v-model="clnum" placeholder="" />
			</view>
			<view v-show="xzinfo.yytype!=1 || xzinfo==''" class="call" @click="addyuy()">预约</view>
			<view v-show="xzinfo.yytype==1" class="call" @click="edityuy()">修改预约</view>
			<tabBar :pagePath="'/pages/lshz/lshz'"></tabBar>
		</view>



		<u-popup :show="getrwtype" mode="center" :closeable="true" round="5" @close="getrwtype=false"
			@open="getrwtype=true">
			<view class="tcsj">
				<view class="tto">任务列表</view>
				<view class="tm">
					<view class="tm1" v-if="rwlists.length>0">
						<view class="tm2" v-for="(item,index) in rwlists" :key="index" @click="csjxz(item)"
							:class="cxzid == item.id ? 'active':''">
							<view class="tm2ts">车牌:{{item.char1}}</view>
							<view class="tm2ts">洗车次数:{{item.xcnum}}</view>
						</view>
					</view>
					<view class="tm1" v-if="rwlists.length==0">
						<view class="tm2">
							<view class="tm2ts">暂无车辆数据</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="addordertype" mode="center" zIndex="10999" :closeable="true" :overlay="false" round="5" @close="addordertype=false"
			@open="addordertype=true">
			<view class="tcsj">
				<view class="tto">选择委托单号</view>
				<view class="tm">
					<view class="tm1" v-if="ordersrw.length>0">
						<view class="tm2" v-for="(item,index) in ordersrw" :key="index" @click="csjxz(item)"
							:class="cxzid == item.consign_mark ? 'active':''">
							<view class="tm2ts">委托单号:{{item.consign_mark}}</view>
							<view class="tm2ts">货名:{{item.cargo_nam}}</view>
						</view>
					</view>
					<view class="tm1" v-if="ordersrw.length==0">
						<view class="tm2">
							<view class="tm2ts">暂无委托单数据</view>
						</view>
					</view>
				</view>
			</view>	
		</u-popup>
		
		<!-- 授权任务 -->
		<u-popup :show="addrwtype" mode="center"  :closeable="true" :overlay="false" round="5" @close="addrwtype=false"
			@open="addrwtype=true">
			<view class="tcsj">
				<view class="tto">授权货主任务</view>
				<view class="tm">
					<u--form labelPosition="left" :model="model1"  ref="uForm">
						<u-form-item label="委托单号" labelWidth="120" prop="userInfo.name" borderBottom ref="item1">
							<u-tag v-if="cxzid==''" text="请选择委托单号" plain @click="addordertype=true"> </u-tag>
							<view  @click="addordertype=true" v-if="cxzid!=''">{{cxzid}} - {{cxinfo.cargo_nam}}</view>
						</u-form-item>
						<u-form-item label="起始时间" labelWidth="120" prop="userInfo.name" borderBottom ref="item1">
							<u-tag v-if="model1.startime==''" text="请选择时间范围" plain @click="sqshow=true"> </u-tag>
							<view v-if="model1.startime!=''" @click="sqshow=true"> 
								{{model1.startime}} 
							</view>
							<u-calendar :show="sqshow" mode="single" :maxCount="1" @confirm="hzsqtime" @close="sqshow=false"></u-calendar>
						</u-form-item>
						<u-form-item label="结束时间" labelWidth="120" prop="userInfo.name" borderBottom ref="item1">
							<u-tag v-if=" model1.endtime==''" text="请选择时间范围" plain @click="sqshow1=true"> </u-tag>
							<view v-if=" model1.endtime!=''" @click="sqshow=true"> 
								{{model1.endtime}}
							</view>
							<u-calendar :show="sqshow1" mode="single" :maxCount="1" @confirm="hzsqtime1" @close="sqshow1=false"></u-calendar>
						</u-form-item>
						
						
						
						<u-form-item label="授权吨数" labelWidth="120" prop="userInfo.name" borderBottom ref="item1">
								<u--input v-model="model1.dnum" border="none"></u--input>
						</u-form-item>
						<u-form-item label="授权车队" labelWidth="120" prop="userInfo.name" borderBottom ref="item1">
							<u--text :text="cdinfo.cdname"></u--text>
						</u-form-item>
						<u-form-item label="授权保税区" labelWidth="120" prop="userInfo.name" borderBottom ref="item1">
								<u-checkbox-group
						            v-model="model1.bstypes"
						            placement="column"
						            @change="checkboxChange"
						        >
						            <u-checkbox
						                :customStyle="{marginBottom: '8px'}"
						                v-for="(item, index) in radiolist"
						                :key="index"
						                :label="item.name"
						                :name="item.disabled"
						            >
						            </u-checkbox>
						        </u-checkbox-group>
						</u-form-item>
							<u-button @click="addrw()" type="primary" text="授权"></u-button>
					</u--form>
				</view>
			</view>
		</u-popup>
		<!-- 查看授权任务详情 -->
		<u-popup :show="opens" mode="center" :closeable="true" round="5" @close="opens=false" @open="opens=true">
			<view class="tcsj">
				<view class="tto">授权货主任务</view>
				<view class="tm">
					<view class="av">委托单号:{{openinfo.orderons}}</view>
					<view class="av">货&#12288;主:{{openinfo.hzdwid}}</view>
					<view class="av">货&#12288;名:{{openinfo.hname}}</view>
					<view class="av">船&#12288;名:{{openinfo.shipnam}}</view>
					<view class="av">保税区授权:{{openinfo.swg==1?'授权':'未授权'}}</view>
					<view class="av">航&#12288;次:{{openinfo.hc}}</view>
					<view class="av">授权时间:{{openinfo.sqendtime}}-{{openinfo.sqstartime}}</view>
				</view>
			</view>
		</u-popup>
		
		
		
		
		
		<!-- 修改司机信息 -->
		<view v-show="editxzsj" class="ck" style="border: 1px solid #3c77b7;">
			<view style="margin-bottom: 10px;overflow: hidden;height: 60px;">
				<view class="bt1" @click="quanxuans">全选</view>
				<view class="bt1" style="background-color: #ff0000;" @click="editgb()">关闭</view>
			</view>
			<view style="margin-top: 15px;overflow:auto;height: 370px;">
				<view class="bt2" :class="{bt2itv:item.checked==true}" v-for="(item,index) in item4" :key="index" @click="eitsiji(item)">
					{{item.cname}}
				</view>
				
				
			</view>
			<view class="fw" @click="qreditsz">确定选择</view>
		</view>
		
		<!-- 选择信息 -->
		<view v-show="xzsj" class="ck" style="border: 1px solid #3c77b7;">
			<view style="margin-bottom: 10px;overflow: hidden;height: 60px;">
				<view class="bt1" @click="quanxuan">全选</view>
				<view class="bt1" style="background-color: #ff0000;" @click="qxsj">关闭</view>
			</view>
			<view style="margin-top: 15px;overflow:auto;height: 370px;">
				<view class="bt2" :class="{bt2itv:item.checked==true}" v-for="item in items2" :key="item.id"
					@click="addsiji(item)">
					{{item.cname}}
				</view>
			</view>
			<view class="fw" @click="qrsz">确定选择</view>
		</view>
		
		<!-- 查看司机列表 -->
		<view v-show="ck" class="ck" style="border: 1px solid #3c77b7;">
			<view
				style="background-color: #3c77b7;height: 40px;line-height: 40px;text-align: center;font-size: 20px;color: #ffffff;">
				司机列表</view>
			<view style="margin-top: 15px;overflow:auto;height: 300px;">
				<view class="bt2" v-for="(item,index) in items3" :key="index">{{item.cname}} </view>
			</view>
			<view @click="qxck"
				style="background-color: #ff0000;height: 40PX;line-height: 40px;text-align: center;font-size: 20px;color: #ffffff;">
				关闭</view>
		</view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	import {
	  request
	} from '@/util/request.js'
	import getDateTime from '@/common/getdateTime.js'
	export default {
		data() {
			return {
				id: '',
				uinfo: '',//用户信息
				ordersrw: [],//委托单号任务
				addordertype:false,//委托弹窗状态设置
				cxzid:'',//委托号选中
				cxinfo:{
					cargo_nam:'',
					consign_mark:'',
					consign_no:'',
					consign_wgt:'',
					inout_id:'',
					loc_no:'',
					oper_proc:'',
					ship_nam:'',
					shipper_cod:'',
					shipper_doc:'',
					stack_nam:'',
					voyage:'',
					work_weight_wgt:''
				},//委托号信息选中
				sqshow:false,//货主任务授权时间状态判断
				model1: {
					cdid:'',
					uid:'',
					dnum:0,
					bstypes:2,
					endtime:'',
					startime:'',
					orderons:'',
					orderinfo:''
				},//授权任务字段
				bclist: [],//班车列表
				cdinfo: '',
				cdid:'',//车队id
				imglist: [],
				cdlists: [],
				
				wtdh: '',
				bccur: '',
				bcinfo: '',
				showPicker: false,
				date: new Date().toISOString().slice(0, 10),
				date1: new Date().toISOString().slice(0, 10),
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: '',
				items: [],
				current: '',
				items1: [{
						value: '1',
						name: '车辆总数',
						checked: 'true'
					},
					{
						value: '2',
						name: '选择司机',
					}
				],
				current1: '',
				clnum: '',
				rytype: 1,
				hzsqid: '',
				items2: [],
				rwlists: [],
				xzsj: false,
				qx: false,
				ck: false,
				items3: [],
				opens: false,
				openinfo: '',
				xzinfo: '',
				item4: [],
				editxzsj: false,
				cksj: '',
				show: false,
				sqshow1:false,
				getrwtype: false,
				addrwtype: false,
				radiolist: [
				{
					name: '授权',
					disabled: 1
				}
				],
			}
		},
		onLoad(op) {
			this.date = getDateTime.dateTimeStr('y-m-d')
			this.date1 = getDateTime.dateTimeStr('y-m-d')
			this.getbancis();
			this.getbancitimedqs()
			this.getuserinfo();
			
		},
		methods: {
			//获取当前货主的委托单号
			async getorderlist()
			{
				let data = {
					name: this.uinfo.hzdwid
				}
				let res = await request('/api/Lshz/getmyorderlist/', 'post',data)
				console.log(res.data)
				this.ordersrw = res.data
			},
			async getcdinfonew(id){
				let res2 = await request('/api/Linshz/getlscdinfo/', 'post',{
					id: id
				})
				console.log('测试车队信息',res2)
				this.cdid = res2.data.data.id;
				this.cdinfo = res2.data.data;
				//获取当前货主的任务
				this.getsqhzorderon()
				//获取当前货主的司机信息
				this.getsjlista();
			},
			async getsjlista()
			{
				let data = {
					name: this.uinfo.hzdwid
				}
				let res = await request('/api/Linshz/getsjlistas', 'post',data)
				this.items2 = res.data.data
			},
			//委托单号选中
			csjxz(e){
				this.addordertype = false
				this.cxzid = e.consign_mark
				this.cxinfo = e
			},
			//货主授权时间
			hzsqtime(e){
				console.log(e)
				this.model1.startime = e[0]
				this.sqshow = false
			},
			hzsqtime1(e){
				this.model1.endtime = e[0]
				this.sqshow1 = false
			},
			closes() {
				this.show = false
			},
			confirm(e) {
				console.log(e)
				this.date1 = e[0]
				this.show = false
			},
			//发布货主任务
			async addrw(){
				this.model1.cdid = this.cdid
				this.model1.uid = this.uinfo.id
				this.model1.orderons = this.cxzid
				this.model1.orderinfo = JSON.stringify(this.cxinfo);
				let res = await request('/api/Lshz/addrw/', 'post',this.model1)
				console.log(res.data)
				if(res.data.code==200){
					this.$refs.uNotify.show({
						type: 'primary',
						message: res.data.msg,
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop:true
					})
					this.addrwtype = false
					this.getorderlist();
					this.getsqhzorderon();
				}else{
					this.$refs.uNotify.show({
						type: 'error',
						message: res.data.msg,
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop:true
					})
				}
			},	
			//获取当前班车
			async getbancitimedqs() {
				let res = await this.$api.getbancitimedqs()
				this.bccur = res.data.id
			},
			async getbancis(){
				let res = await this.$api.getbanci()
				this.bclist = res.data.data
			},
			//获取当前货主的任务
			async getsqhzorderon() {
				let data = {
					cdid: this.cdid,
					times: this.date1,
					bcid: this.bccur
				}
				let res = await this.$api.getsqhzorderon(data)
				if (res.data.code == 0) {
					this.items = res.data.data
				}
			},
			change1(e) {
				console.log(e);
				this.date1 = e.fulldate
				this.getsqhzorderon();
				this.showPicker = false

			},
			editxzitem4() {
				this.current1 = 2
				this.editxzsj = true
				let xzinfo = this.xzinfo
				this.getorderonbdsjs(xzinfo);

			},
			async getorderonbdsjs(e) {
				//数组改变 进行循环改变
				let data = {
					yid: e.ydata.id
				}
				//查询当前预约单号的绑定记录
				let res = await this.$api.getorderonbdsjs(data)
				// console.log(res.data.data)
				this.item4 = res.data.data
			},
			qreditsz() {
				this.editxzsj = false
			},
			editgb() {
				this.editxzsj = false
			},

			addyuyopen(e) {
				console.log(e)
				this.hzsqid = e.id
				this.xzinfo = e
				if (e.yytype == 1) {
					this.clnum = e.ydata.clnum
				}
			},
			opfen(e) {
				this.opens = true
				this.openinfo = e
			},
			gbopen() {
				this.opens = false
			},
			leixin(e) {
				this.current1 = e
				this.rytype = e
				if (e == 1) {
					this.xzsj = false
				} else {
					this.xzsj = true
				}
			},
			async cksjinfo(e) {
				console.log(e)
				if (e.yytype == 1) {
					this.ck = true
					let data = {
						yid: e.ydata.id,
					}
					//查询当前预约单号的绑定记录
					let res = await this.$api.getorderonbdsj(data)
					console.log(res.data.data)
					if (res.data.code == 0) {
						this.items3 = res.data.data
					}
				} else {
					this.items3 = []
				}
			},
			qxck() {
				this.ck = false
			},
			quanxuans() {
				if (this.qx == true) {
					var item4 = this.item4
					for (var i = 0, lenI = item4.length; i < lenI; ++i) {
						const item = item4[i]
						this.$set(item, 'checked', false)
					}
					this.qx = false
				} else {
					var item4 = this.item4
					for (var i = 0, lenI = item4.length; i < lenI; ++i) {
						const item = item4[i]
						this.$set(item, 'checked', true)
					}
					this.qx = true
				}
			},
			quanxuan() {
				if (this.qx == true) {
					var items2 = this.items2
					for (var i = 0, lenI = items2.length; i < lenI; ++i) {
						const item = items2[i]
						this.$set(item, 'checked', false)
					}
					this.qx = false
				} else {
					var items2 = this.items2
					for (var i = 0, lenI = items2.length; i < lenI; ++i) {
						const item = items2[i]
						this.$set(item, 'checked', true)
					}
					this.qx = true
				}
			},
			qrsz() {
				this.xzsj = false
			},
			addsj() {
				if (this.xzsj == true) {
					this.xzsj = false
				} else {
					this.xzsj = true
				}
			},
			qxsj() {
				this.xzsj = false
			},

			addsiji(e) {
				var items = this.items2,
					values = e;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (item.id == e.id) {
						if (item.checked == true) {
							this.$set(item, 'checked', false)
						} else {
							this.$set(item, 'checked', true)
						}
					}
				}
			},
			eitsiji(e) {
				console.log(e)
				var items = this.item4,
					values = e;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (item.id == e.id) {
						if (item.checked == true) {
							this.$set(item, 'checked', false)
						} else {
							this.$set(item, 'checked', true)
						}
					}
				}
			},
			//获取用户信息
			async getuserinfo() {
				let data = {
					id: uni.getStorageSync('uid')
				}
				let res = await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if (res.data.code == 0) {
					uni.setStorageSync('uid', res.data.data.id);
					uni.setStorageSync('cdtype', res.data.data.cdtype);
					this.uinfo = res.data.data
					this.getcdinfonew(res.data.data.id)
					this.getorderlist();
				}
			},
			
			async addyuy() {
				var that = this;
				let xzsjidall = []
				that.items2.forEach(item => {
					if (item.checked == true) {
						// console.log(item)←————重点 获取选中的值放到数组中
						xzsjidall.push(item.id);
					}
				});
				let data = {
					uid: uni.getStorageSync('uid'),
					cdid: this.cdid,
					datetime: this.bccur,
					times: this.date1,
					xzsjidall: xzsjidall,
					rytype: this.rytype,
					hzsqid: this.hzsqid,
					clnum: this.clnum,
					hid: this.xzinfo.huids
				}
				// let res = await this.$api.addyuy(data)
				let res = await  request('/api/Lshz/addyuy', 'post',data)
				if (res.data.code == 0) {
					let data1 = {
						uid: uni.getStorageSync('uid'),
						msg: '车队' + this.cdinfo.cdname + '预约了委托单号' + this.xzinfo.orderons + '时间是' + this.date1,
						lv: 1,
						type: 2,
						cz: JSON.stringify(data)
					}
					await this.$api.addlogs(data1)
					uni.navigateTo({
						url: '/pages/lshz/lhcx'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
			},
			async edityuy() {
				var that = this;
				var that = this;
				let xzsjidall = []
				that.item4.forEach(item => {
					if (item.checked == true) {
						xzsjidall.push(item.id);
					}
				});
				let data = {
					uid: uni.getStorageSync('uid'),
					yid: this.xzinfo.ydata.id,
					xzsjidall: xzsjidall,
					clnum: this.clnum
				}
				console.log(data)
				let res = await this.$api.edityuy(data)
				if (res.data.code == 0) {
					//log
					let data1 = {
						uid: uni.getStorageSync('uid'),
						msg: '车队' + this.cdinfo.cdname + '修改预约了委托单号' + this.xzinfo.orderons + '时间是' + this.date1,
						lv: 1,
						type: 2,
						cz: JSON.stringify(data)
					}
					await this.$api.addlogs(data1)
					uni.navigateTo({
						url: '/pages/lshz/lhcx'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
			},
			addbanc(e) {
				console.log(e)
				this.bccur = e;
				this.getsqhzorderon();
			},
			onShowDatePicker() { //显示
				this.show = true
				// this.showPicker = true;
			},
			async init() {
				let data = {
					cdid: this.uinfo.cdid
				}
				let res1 = await this.$api.getcdlist({
					cdid: this.uinfo.cdid,
					cdtype: 1
				})
				console.log(res1.data.data)
				// this.cdlists = res1.data.data;
				this.items2 = res1.data.data;
			},
		}
		// ,components: {
		// 	uniCalendar
		// }
	}
</script>

<style lang="scss">
	.uni-list-cell {
		justify-content: flex-start
	}

	.page-detail {
		padding: 10px;
		background-color: #ffffff;

		.main {

			.title {
				width: 100%;

				view {
					font-size: 20px;
					color: #3c77b7;
					height: 20px;
					margin-top: 5px;
					line-height: 20px;
				}
			}

			.timesxz {
				margin-top: 10px;
				overflow: hidden;
				width: 100%;
				.fs{
					float: left;
					width: 46%;
					height: 20px;
					margin-top: 5px;
					line-height: 20px;
					font-size: 20px;
					color: #3c77b7;
					text-align: center;
				}
				.butxz{
				  	font-size: 14px;
					height: 20px;
					line-height: 20px;
					border-radius: 10px;
					width: 100px;
					background-color: #3c77b7;
					border: 1px solid #3c77b7;
					color: #ffffff;
					margin-left: 60px;
				}
				.gs {
					width: 100%;
					font-size: 20px;
					color: #3c77b7;
					height: 20px;
					margin-top: 5px;
					line-height: 20px;
				}
			}

			.tvs {
				color: #3c77b7;
				font-size: 18px;
			}

			.tables {
				overflow: hidden;
				width: 100%;
				margin-top: 25px;
				height: 42px;
				.tables-item {
					float: left;
					border: 1px solid #3c77b7;
					width: 32%;
					height: 40px;
					line-height: 40px;
					border-radius: 10px;
					text-align: center;
					margin-left: 3px;
				}

				.actives {
					background-color: #3c77b7;
					color: #ffffff;
				}
			}

			.tableview {
				.tabsl {
					height: 220px;
					overflow: auto;
				}
				.nottabsl {
					text-align: center;
					font-size: 20px;
					color: #3c77b7;
					margin-top: 20px;
				}
				.tabletitle {
					overflow: hidden;
					width: 100%;
					margin-top: 5px;
					height: 42px;

					.tsa {
						float: left;
						text-align: center;
						height: 40px;
						width: 25%;
						font-size: 18px;
						line-height: 40px;
						background-color: #3c77b7;
						color: #dedede;
					}
				}
			}
		}


		.tcsj {
			width: 360px;
			height: 500px;

			.fm {
				overflow: hidden;
				height: 36px;
				line-height: 36px;

				.fm1 {
					float: left;
					font-size: 20px;
					margin-left: 3px;
				}
			}

			.ft {
				padding: 5px;
				font-size: 17px;
				line-height: 26px;
			}

			.fms {
				overflow: hidden;
				height: 36px;
				line-height: 36px;

				.fm1s {
					float: left;
					font-size: 20px;
					margin-left: 3px;
					width: 32%;
					text-align: center;
					background-color: #e0e0e0;
				}

				.fm2s {
					float: left;
					font-size: 20px;
					margin-left: 3px;
					width: 32%;
					text-align: center;
				}
			}
			.tm {
				height: 400px;
				border-top: 1px solid #3c77b7;
				padding: 10px;
				.tm1 {
					overflow: auto;
					height: 398px;

					.tm2 {
						border: 1px solid #3c77b7;
						border-radius: 5px;
						width: 300px;
						margin: 0 auto;
						margin-top: 10px;
						padding-bottom: 4px;
						padding-top: 4px;

						.tm2ts {
							text-align: center;
							margin-top: 5px;
							font-size: 18px;
						}
					}
				}

			}

			.tto {
				background-color: #3c77b7;
				color: #ffffff;
				text-align: center;
				height: 40px;
				line-height: 40px;
				font-size: 20px;
			}

			.active {
				background-color: #3c77b7;
				color: #ffffff;
			}
		}

		.tag {
			margin-top: 20upx;
			margin-bottom: 30upx;

			.tag-item {
				padding: 10upx 20upx;
				background-color: rgb(186, 222, 252);
				color: rgb(33, 150, 243);
				margin-right: 20upx;
			}
		}

		.info {
			padding: 30upx 0;
			display: flex;
			border-top: 1upx solid #dedede;
			border-bottom: 1upx solid #dedede;
			margin-bottom: 20upx;

			.info-item {
				width: 30upx;
				height: 90upx;
				line-height: 90upx;
				padding: 3upx;
				margin-left: 5upx;
				border: 1px solid #3c77b7;
				flex: 0 0 33.33%;
				text-align: center;
				border-radius: 10px;
			}
		}

		.note {
			.note-item {
				display: flex;
				color: #666;
				display: flex;
				align-items: center;
				margin-bottom: 20upx;

				image {
					width: 40upx;
					height: 40upx;
					margin-right: 10upx;
				}

				.n-left {
					width: 240upx;
					display: flex;
					align-items: center;

					text {
						margin-right: 0;
					}
				}
			}
		}

		.eqment {
			display: flex;
			flex-wrap: wrap;

			.eq-item {
				flex: 0 0 20%;
				flex-direction: column;

				image {
					width: 100upx;
					height: 100upx;

				}
			}
		}

		.fix-foot {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

		}

		.fw {
			height: 40px;
			text-align: center;
			line-height: 40px;
			margin: 0 auto;
			margin-top: 30upx;
			background-color: #3c77b7;
			color: #ffffff;
			font-size: 18px;
			font-weight: 600;
		}

		.call {
			background-color: #3c77b7;
			color: #fff;
			width: 300px;
			height: 50px;
			margin: 0 auto;
			margin-bottom: 20px;
			margin-top: 20px;
			line-height: 50px;
			text-align: center;
			border-radius: 10px;
		}

		.lf {
			margin-left: 45%;
		}

		.atc {
			background-color: #3c77b7;
		}

		.gs {
			margin-top: 20upx;
			margin-bottom: 20upx;
			font-size: 20px;
			display: block;
			float: left;
			color: #3c77b7;
		}
	}

	.fl {
		float: left;
		width: 25%;
		font-size: 20px;
		text-align: center;
		border: 1px solid #000000;
		line-height: 40px;
		min-height: 40px;
		overflow: hidden;

		//margin-left: 10upx;
	}

	.ck {
		z-index: 999;
		-moz-opacity: 1;
		opacity: 1;
		// border: 1px solid #000000;
		position: fixed;
		background-color: #ffffff;
		width: 90%;
		border-radius: 5px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		//padding: 10upx;
	}

	.ls {
		width: 40%;
		height: 50px;
		float: left;
		line-height: 50px;
		margin: 10px 16px;
		text-align: center;
		border: 1px solid #3c77b7;
		font-size: 20px;
		border-radius: 10px;
	}

	.lsitv {
		background-color: #3c77b7;
		color: #ffffff;
	}

	.bt1 {
		float: left;
		color: #ffffff;
		font-size: 18px;
		font-weight: 600;
		width: 43%;
		background-color: #3c77b7;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #3c77b7;
		border-radius: 10px;
		margin: 10px;
	}

	.bt2 {
		float: left;
		border: 1px solid #3c77b7;
		height: 50px;
		line-height: 50px;
		text-align: center;
		width: 28%;
		margin-left: 10px;
		border-radius: 10px;
		font-size: 20px;
		overflow: hidden;
		margin-top: 4px;
	}

	.bt2itv {
		background-color: #3c77b7;
	}

	.bc1 {
		background-color: #ffff00;

	}

	.bc2 {
		background-color: #ff5500;
	}

	.bc3 {
		background-color: #3c77b7;
	}

	.clf5 {
		color: #ffffff;
		font-weight: 600;
	}

	.xzbut {
		width: 120px;
		line-height: 30px;
		float: left;
		margin-left: 10px;
		font-size: 20px;
		height: 30px;
		color: #ffffff;
		background-color: #3c77b7;
	}

	.av {
		height: 40px;
		line-height: 40px;
		font-size: 20px;
	}
</style>